Form フォーム UI

Formタグ で入力をくくる

配置

上から下に1つの方向に眼が移動するように配置したい

❌左→右→左下→右下など

1タスクを1方向に解決

分割する

同属性のフォームで分けて配置する

ラベルとフィールド

❌左ラベル 右フィールド

😊左上ラベル フォーム下

送信、キャンセルなど

スマホ

フォームの下

分割

分割する時

あとから編集、更新が多いもの

何か書類を見ながら行うもの

分割しない時

項目数、画面数をへらす

分割方法

種類で分割

入力漏れをさせない工夫

重要度で分割

よく使われる機能を浅い階層、ニッチな機能を深い階層へ

なかなか消せない消せない機能を残すなど

現在入力される範囲をわかりやすく示す

進行状況の表示

画面を邪魔しない程度の大きさにする

別ページに分けてる場合

階層型で表示も良い

ホーム

✅別ページ1

別ページ2

入力値

type属性の設定

必須要件のみ入力し、他は後で入力可能

FormUIをリスト情報の表示、編集、新規追加の使用において使い回せるように実装する

フォームページになった際、、自動でキーボード開く。

code:label.html

<label for="email">メールアドレス</label>

<input id="email">

Tabで移動できるか

参考